<template>

  <div class="erwm">
    <span class="goback" >
      <van-icon @click="goback" name="clear" size="26" color="#333"/>
<!--      <van-icon name="fanhui" class="iconfont" class-prefix='icon' size="22"/>-->
    </span>

    <div class="scan">
      <div id="bcid">
        <div style="height:40%"></div>
      </div>
<!--      <footer>-->
<!--        <p @click="startRecognize"></p>-->
<!--        <p @click="startScan"></p>-->
<!--        <p @click="cancelScan"></p>-->
<!--        <p @click="closeScan"></p>-->
<!--      </footer>-->
    </div>
  </div>

</template>


<script type='text/ecmascript-6'>

  var scan = null;

  var styles = {
    frameColor: "#2e5dea",
    scanbarColor: "#2e5dea",
    width: '100%',
    height: '550px',
  };//边框属性，中间线属性，背景色

  var filter;//扫码格式 空为全类型

  export default {
    name: 'erwm',

    components: {},

    data() {
      return {
        codeUrl: '',
        openWebView:false
      }
    },

// created () {
// //进入页面就调取扫一扫

// this.startRecognize();

// this.startScan();

// alert('创建');

// },

    mounted() {
      let _this = this;
      this.startRecognize();
      this.startScan();

      var webview = plus.webview.currentWebview()
      plus.key.addEventListener('backbutton', function () {
        _this.closeScan()
        if(_this.openWebView){
          //获得列表界面的webview jmyc
           //var viewObj = plus.webview.getWebviewById('test');
          // //canBack查询窗口是否可退
          // viewObj.canBack((event) => {
          //   console.log('是否可返回：'+event.canBack);
          //   var canBack = event.canBack;
          //   if(canBack) {//如可退，则返回上一页面
          //     viewObj.back();
          //   } else {//如不可退，则退出窗口
               console.log('退出扫一扫页面')
               plus.webview.close('test')
               _this.openWebView = false;
          //   }
          // })

          return false;
        }
        return true;
      })
    },



    methods: {
//创建扫描控件
      startRecognize() {
        let that = this;
        if (!window.plus) return;
        scan = new plus.barcode.Barcode('bcid', filter, styles);
        console.log(scan)
        scan.onmarked = onmarked;
        function onmarked(type, result, file) {
          switch (type) {
            case plus.barcode.QR:
              type = 'QR';
              break;
            case plus.barcode.EAN13:
              type = 'EAN13';
              break;
            case plus.barcode.EAN8:
              type = 'EAN8';
              break;
            default:
              type = '其它' + type;
              break;
          }
          that.closeScan();
          result = result.replace(/\n/g, '');
          that.codeUrl = result;
          //that.$toast.loading({message:'加载中'})
         // plus.webview.open(result);
          that.toLink(result)
        }
        that.startScan();
      },

//开始扫描

      startScan() {
        if (!window.plus) return;
        scan.start();
      },

//关闭扫描

      cancelScan() {
        if (!window.plus) return;
        scan.cancel();
      },

     //关闭条码识别控件
      closeScan() {
        if (!window.plus) return;
        scan.close();
      },

      toLink(url){
        this.openWebView = true;
        plus.webview.open(
          url,
          'test',
          {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
            titleNView: {                       // 窗口的标题栏控件
              autoBackButton: true,             //新打开的窗口是否有返回键
              // titleText:"标题栏",                // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
              titleColor:"#000000",             // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
              titleSize:"17px",                 // 字体大小,默认17px
              backgroundColor:"#F7F7F7",        // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
              progress:{                        // 标题栏控件的进度条样式
                color:"#00FF00",                // 进度条颜色,默认值为"#00FF00"
                height:"2px"                    // 进度条高度,默认值为"2px"
              },
              splitLine:{                       // 标题栏控件的底部分割线，类似borderBottom
                color:"#CCCCCC",                // 分割线颜色,默认值为"#CCCCCC"
                height:"1px"                    // 分割线高度,默认值为"2px"
              }
            }
          },
          'fade-in'
        );
      },

      goback() { // 返回
        this.closeScan()
        this.$router.go(-1);
        // this.isShow = false;
      }
    }
  }

</script>


<style scoped>
  .erwm{
    height: 100vh;
  }
  .goback {
    display: flex;
    z-index: 9999;
    position: absolute;
    left: 15px;
    top: 15px;
  }

  .scan {
    height: 100%;
    position: relative;
  }

  .scan #bcid {
    width: 100%;
    height: 94vh;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    margin-top: .88rem;
    text-align: center;
    color: red;
    /*background: #fff;*/
  }

  .scan footer {
    position: absolute;
    left: 0;
    bottom: 1rem;
    height: 2rem;
    line-height: 2rem;
    z-index: 2;
  }


</style>
